<script lang="ts" setup>
import { useTableDataMember } from "@/hooks/commonData/useCommonData"
import { getUserList } from "@/api/system-api/user"
import { UserQuery } from "@/api/system-api/user/types/userQuery"
import { Userinfo } from "@/api/system-api/user/types/user"
const query = defineProps<UserQuery>()
const { tableRef, tableDataRef, totalRef, tableLoadingRef, queryRef, getList, handleCurrentChange, handleSizeChange } =
  useTableDataMember(query, getUserList, false)
const getSelection = (): number[] => {
  return (tableRef.value.getSelectionRows() as Userinfo[]).map((t) => t.id!)
}
defineExpose({
  getList,
  getSelection
})
</script>
<template>
  <div class="app-container">
    <el-table
      ref="tableRef"
      v-loading="tableLoadingRef"
      :data="tableDataRef"
      :border="true"
      fit
      highlight-current-row
      stripe
      style="width: 100%"
      element-loading-text="给我一点时间"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="用户姓名" prop="userName" show-overflow-tooltip />
      <el-table-column label="账号" prop="userAccount" show-overflow-tooltip />
      <el-table-column label="所属单位" prop="orgName" show-overflow-tooltip />
    </el-table>
    <div style="text-align: center; margin-top: 15px">
      <el-pagination
        :current-page="queryRef.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryRef.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRef"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="justify-content: center"
      />
    </div>
  </div>
</template>

<style scoped></style>
